<template>
	<view>
		<u-navbar :is-back="false" title="" :border-bottom="false">
			<view class="slot-wrap">
				<view class="topBox">
					<view class="left-input">
						<image src="../../static/images/home/searh.png" mode=""></image>
						<u-input v-model="value" type="text" :border="false" :clearable="false" placeholder="关键词搜索" />
					</view>
					<view class="right-img" @click="goMessage">
						<image src="../../static/images/home/message.png" mode=""></image>
						<view class="num">
							5
						</view>
					</view>
				</view>
			</view>
		</u-navbar>
		<!-- 顶部内容 -->
		<view class="top-content">
			<view class="top-box">
				<image src="../../static/images/develop/dev1.png" mode=""></image>
			</view>
			<view class="materials-box">
				<view class="item" @click="goMaterials(1)">
					<view class="img-box">
						<image src="../../static/images/buildingmaterials/materials1.png" mode=""></image>
					</view>
					<view class="title">
						大型耗材
					</view>
				</view>
				<view class="item" @click="goMaterials(2)">
					<view class="img-box">
						<image src="../../static/images/buildingmaterials/materials2.png" mode=""></image>
					</view>
					<view class="title">
						大型周材
					</view>
				</view>
				<view class="item" @click="goMaterials(3)">
					<view class="img-box">
						<image src="../../static/images/buildingmaterials/materials3.png" mode=""></image>
					</view>
					<view class="title">
						小型耗材
					</view>
				</view>
				<view class="item" @click="goMaterials(4)">
					<view class="img-box">
						<image src="../../static/images/buildingmaterials/materials4.png" mode=""></image>
					</view>
					<view class="title">
						小型周材
					</view>
				</view>
			</view>
			<view class="materials-box">
				<view class="item" @click="goMaterials(5)">
					<view class="img-box">
						<image src="../../static/images/buildingmaterials/materials5.png" mode=""></image>
					</view>
					<view class="title">
						水电材料
					</view>
				</view>
				<view class="item" @click="goMaterials(6)">
					<view class="img-box">
						<image src="../../static/images/buildingmaterials/materials6.png" mode=""></image>
					</view>
					<view class="title">
						租赁材料
					</view>
				</view>
				<view class="item" @click="goMaterials(7)">
					<view class="img-box">
						<image src="../../static/images/buildingmaterials/materials7.png" mode=""></image>
					</view>
					<view class="title">
						其他材料
					</view>
				</view>
				<view class="item" @click="goMaterials(8)">
					<view class="img-box">
						<image src="../../static/images/buildingmaterials/materials8.png" mode=""></image>
					</view>
					<view class="title">
						其他材料
					</view>
				</view>
			</view>
		</view>
		<!-- 顶部内容 -->
		<!-- 中间内容 -->
		<view class="center-content">
			<view class="center-img-box">
				<image src="../../static/images/develop/dev1.png" mode=""></image>
			</view>
			<view class="center-title">
				推荐商家
			</view>
		</view>
		<view class="select-box">
			<view class="item-select">
				<view class="select-click">
					距离<image src="../../static/images/home/selecticon.png" mode=""></image>
				</view>
			</view>
			<view class="item-select">
				<view class="select-click select-unclick">
					销量<image src="../../static/images/home/selecticon.png" mode=""></image>
				</view>
			</view>
			<view class="item-select">
				<view class="select-click select-unclick">
					评分<image src="../../static/images/home/selecticon.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="foot-content">
			<block v-for="(item,index) in list" :key="index">
				<company-item :item="item"></company-item>
			</block>
		</view>
		<!-- 中间内容 -->
		<u-tabbar :list="vuex_tabbar" active-color="rgba(211,176,104,1)" inactive-color="rgba(153,153,153,1)" height="98"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				list: [{
					name: '华新建材门市有限公司'
				}, {
					name: '华男建材门市有限公司'
				}]
			}
		},
		methods: {
			goMessage() {
				this.$u.route({
					url: 'pages/home/message/message',
				})
			},
			goMaterials(index) {
				let name = '';
				if (index == 1) {
					name = '大型耗材'
				} else if (index == 2) {
					name = '大型周材'
				} else if (index == 3) {
					name = '小型耗材'
				} else if (index == 4) {
					name = '小型周材'
				} else if (index == 5) {
					name = '水电材料'
				} else if (index == 6) {
					name = '租赁材料'
				} else if (index == 7) {
					name = '其他材料'
				} else if (index == 8) {
					name = '其他材料'
				}
				this.$u.route({
					url: 'pages/buildingmaterials/company/index',
					params: {
						title: name
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;

		.topBox {
			width: 100%;
			display: flex;

			.left-input {
				flex: 1;
				display: flex;
				background: rgba(242, 242, 242, 1);
				opacity: 1;
				border-radius: 100rpx;
				padding: 0 28rpx;

				image {
					margin-right: 15rpx;
					margin-top: 22rpx;
					width: 29rpx;
					height: 29rpx;
				}
			}

			.right-img {
				width: 62rpx;
				height: 68rpx;
				margin-left: 4rpx;
				position: relative;

				image {
					width: 62rpx;
					height: 68rpx;
				}

				.num {
					position: absolute;
					top: 0;
					right: -6rpx;
					width: 30rpx;
					height: 30rpx;
					background: rgba(255, 32, 32, 1);
					border-radius: 50%;
					opacity: 1;
					line-height: 30rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}

	.top-content {
		padding: 16rpx 30rpx 40rpx;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 10rpx solid rgba(245, 245, 245, 1);

		.top-box {
			width: 100%;
			height: 260rpx;
			border-radius: 16rpx;

			image {
				width: 100%;
				height: 260rpx;
				border-radius: 16rpx;
			}
		}

		.materials-box {
			width: 100%;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;

			.item {
				margin-top: 35rpx;

				.img-box {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}

				.title {
					font-size: 26rpx;
					font-weight: 400;
					line-height: 35rpx;
					color: rgba(0, 0, 0, 1);
					opacity: 1;
				}
			}
		}
	}

	.center-content {
		padding: 30rpx 30rpx 0;
		width: 100%;
		box-sizing: border-box;

		.center-img-box {
			width: 100%;
			height: 144rpx;
			border-radius: 16rpx;

			image {
				width: 100%;
				height: 144rpx;
				border-radius: 16rpx;
			}
		}

		.center-title {
			margin-top: 30rpx;
			font-size: 42rpx;
			font-weight: bold;
			line-height: 56rpx;
			color: rgba(51, 51, 51, 1);
			opacity: 1;
		}
	}

	.select-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid rgba(223, 223, 223, 1);

		.item-select {
			width: 250rpx;
			text-align: center;
			line-height: 90rpx;

			.select-click {
				font-size: 26rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				opacity: 1;

				image {
					width: 24rpx;
					height: 12rpx;
					margin-left: 14rpx;
					margin-bottom: 4rpx;
				}
			}

			.select-unclick {
				font-size: 26rpx;
				font-weight: normal;
				color: rgba(51, 51, 51, 1);
				opacity: 1;
			}
		}
	}

	.foot-content {
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
	}
</style>
